import React, { Component } from 'react';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Modal, Row, Col, Checkbox, Tooltip, Select, Input } from 'antd';
import { connect } from 'dva';
import DictCode from '../../components/DictCode';
import { uniqueArray } from '@/utils/utils';

const CheckboxGroup = Checkbox.Group;
const FormItem = Form.Item;
const { TextArea } = Input;
const { Option } = Select;
@connect(({ publicdata: { proObjList, probTypeList }, reducemprec }) => ({
  proObjList,
  probTypeList,
  proInsuranceList: reducemprec.proInsuranceList,
}))
@Form.create()
class ProModal extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'publicdata/fetchProType',
      payload: {},
    });
    dispatch({
      type: 'publicdata/fetchAlertList',
      payload: ['ALRT_OBJ'],
    });
    dispatch({
      type: 'publicdata/fetchProObjList',
      payload: ['BIZ_INS_TYPE', 'BIZ_ACCU_TYPE'],
    });
  }

  handleCancle = () => {
    const { form, onCancel = () => {} } = this.props;
    onCancel();
    form.resetFields();
  };

  // uniqueArray = (array, key) => {
  //   var result = [array[0]];
  //   for (var i = 1; i < array.length; i++) {
  //     var item = array[i];
  //     var repeat = false;
  //     for (var j = 0; j < result.length; j++) {
  //       if (item[key] == result[j][key]) {
  //         repeat = true;
  //         break;
  //       }
  //     }
  //     if (!repeat) {
  //       result.push(item);
  //     }
  //   }
  //   return result;
  // };
  // 处理姓名的文字显示
  handleContent = paramList => {
    const tempArr = [];
    const tempArr2 = [];
    let nameContent = '';
    let nameTitle = '';
    // 处理重名
    // nameList.map();
    const nameList = uniqueArray(paramList, 'empName');
    nameList.map(value => {
      tempArr.push(value.empName);
      tempArr2.push(value.empName);
      return true;
    });

    nameTitle = tempArr2.join('、');
    if (tempArr.length >= 3) {
      nameContent = `${tempArr.filter((item, index) => index <= 2).join('、')}等${
        tempArr.length
      }人`;
    } else {
      nameContent = tempArr.join('、');
    }
    return (
      <Tooltip placement="top" title={<div>{nameTitle}</div>}>
        {nameContent}
      </Tooltip>
    );
  };

  //
  // getProType = () => {
  //   const { dispatch } = this.props;
  //   dispatch({
  //     type: 'publicdata/fetchProType',
  //     payload: {},
  //   });
  // };

  handleOk = () => {
    const { form, onOk } = this.props;
    form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        onOk(values);
      }
    });
  };

  render() {
    const sendLoading = false;
    const formItemLayout = {
      labelCol: { md: { span: 7 } },
      wrapperCol: { md: { span: 16 } },
    };
    const {
      selectedRows,
      isAlertObj,
      isProObj,
      probTypeList,
      proInsuranceList,
      isProType = true,
      form,
      visible,
      confirmLoading,
    } = this.props;
    const { getFieldDecorator } = form;
    proInsuranceList.map(proitem => {
      const temp = proitem;
      temp.label = temp.itemName;
      temp.value = temp.itemCode;
      return true;
    });
    if (!sendLoading) {
      return (
        <Modal
          title="标记问题人员"
          visible={visible}
          onOk={this.handleOk}
          onCancel={this.handleCancle}
          destroyOnClose
          confirmLoading={confirmLoading}
        >
          <div>
            <Row>
              <Col>
                <FormItem {...formItemLayout} label="姓名">
                  <Col>{this.handleContent(selectedRows)}</Col>
                </FormItem>
              </Col>
            </Row>
            {isAlertObj ? (
              <Row>
                <Col>
                  <FormItem {...formItemLayout} label="提醒对象">
                    {getFieldDecorator('alrtObjs', {
                      rules: [{ required: true, message: '请选择提醒对象' }],
                    })(<DictCode inputType="2" dictType="ALRT_OBJ" />)}
                  </FormItem>
                </Col>
              </Row>
            ) : null}
            {isProObj ? (
              <Row>
                <Col>
                  <FormItem {...formItemLayout} label="问题对象">
                    {getFieldDecorator('subBusiTypes', {
                      rules: [{ required: true, message: '请选择问题对象' }],
                      // })(<CheckboxGroup options={proObjData ? proObjData : proObjList} />)}
                    })(<CheckboxGroup options={proInsuranceList || null} />)}
                  </FormItem>
                </Col>
              </Row>
            ) : null}
            <Row>
              {/* <Col>
                <FormItem {...formItemLayout} label="问题人员类型">
                  {getFieldDecorator('probTypeId', {
                    rules: [{ required: true, message: '请选择问题类型' }],
                  })(<DictCode dictType="INS_SERVICE_TYPE" style={{ width: '100%' }} />)}
                </FormItem>
              </Col> */}
              {isProType ? (
                <Col>
                  <FormItem {...formItemLayout} label="问题人员类型">
                    {getFieldDecorator('probTypeId', {
                      rules: [{ required: true, message: '请选择问题人员类型' }],
                    })(
                      <Select style={{ width: '100%' }} showSearch optionFilterProp="children">
                        {probTypeList.map(value => (
                          <Option key={value.probTypeId}>{value.probTypeName}</Option>
                        ))}
                      </Select>
                    )}
                  </FormItem>
                </Col>
              ) : null}
            </Row>
            <Row>
              <Col>
                <FormItem {...formItemLayout} label="问题说明">
                  {getFieldDecorator('probTypeDesc', {
                    rules: [{ required: true, message: '请填写问题说明' }],
                  })(
                    <TextArea
                      placeholder="请输入问题说明"
                      autosize={{ minRows: 3, maxRows: 6 }}
                      maxLength="100"
                    />
                  )}
                </FormItem>
              </Col>
            </Row>
          </div>
        </Modal>
      );
    }
    return null;
  }
}

export default ProModal;
